<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>返回顶部</title>
  <style type="text/css">
     *{
       margin: 0;
       padding: 0;
     }
     /* 第二步：使用position: fixed;把回到顶部按钮定位在右下角 */
     .gotop{
       display: block;
       width: 32px;
       height: 32px;
       background-color: red;
       text-align: center;
       text-decoration: none;
       font-size: 14px;
       font-weight: bold;
       color: white;
       line-height: 32px;
       position: fixed;
       right:50px;
       bottom:50px; 
       opacity: 0;
       /*top: 500px;*/
     }
  </style>
</head>
<body>
   <div style="background-color: red; width:1200px; height: 500px; margin:0 auto"></div>
   <div style="background-color: blue; width:1200px; height: 500px; margin:0 auto"></div>
   <div style="background-color: green; width:1200px; height: 500px; margin:0 auto"></div>
   <div style="background-color: rgb(128, 0, 109); width:1200px; height: 500px; margin:0 auto"></div>
   <!-- 第一步：写一个回到顶部的div -->
   <div class="wrap">
       <a href="###" class="gotop">TOP</a>
   </div>
   <script src="./js/jquery-1.8.3.min.js"></script>
   <!-- 第三步：开始写js -->
   <script type="text/javascript">
    $(function(){
         // 当滚动条滚动大于100时出现，未大于，消失
         $(window).scroll(function(){
           if($(document).scrollTop()<200){
             $(".gotop").stop().animate({
                 opacity: 0  
             },100)
           }
           else{
             $(".gotop").show().stop().animate({  
                 opacity: 1      
             },100)
           }
        })
       // 返回顶部
       $(".gotop").on("click",function(){
            $("html,body").animate({"scrollTop":0})
       })
    })
   </script>
</body>
</html>